<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      @click-left="$router.go(-1)"
      :title="$route.name"
      left-arrow
      right-text="登录"
      @click-right="$router.push('/login')"
    />
    <!-- 表单项 -->
    <van-form @submit="register">
      <van-field
        v-model="regList.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, validator, message: '请填写手机号' }]"
      />
      <van-field
        v-model="regList.nickname"
        name="昵称"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />
      <van-field
        v-model="regList.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
//引入轻提示框
import { Toast } from "vant";
//引入封装好的接口
import { Register } from "../util/axios";
export default {
  data() {
    return {
      regList: {
        phone: "", 
        nickname: "", 
        password: "",
      },
    };
  },
  methods: {
    //自定义验证器
    validator(val) {
      return /1\d{10}/.test(val);
    },
    //封装一个注册事件
    register() {
      //调取注册接口
      Register(this.regList)
        .then((res) => {
          if (res.code == 200) {
            Toast.success(res.msg);
            //注册成功之后,跳转到登录
            this.$router.push("/login");
          }else{
              Toast.fail(res.msg)
          }
        })
        .catch((err) => {
          console.log(err, "错误响应");
        });
    },
  },
};
</script>

<style scoped>
.van-form{
  margin-top: 2rem;
}
.van-field{
  margin-top: .5rem;
}
</style>
